<template>
<div class="detail-main">

    <!-- 点击新增内容 -->
    <el-card class="box-card addCard" v-loading="loading" :element-loading-text="tips">
        <div slot="header" class="clearfix">
            <span v-if="id">编辑文章</span>
            <span v-else>新增文章</span>
        </div>
        <!-- 使用表单进行提交 -->
        <div class="text item">
            <el-form ref="article" :model="article" label-width="80px" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="15">
                        <el-form-item label="文章标题" prop="title">
                            <el-input v-model="article.title" placeholder="请输入文章标题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="15">
                        <el-form-item label="文章作者" prop="author">
                            <el-input v-model="article.author" placeholder="请输入作者姓名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form-item label="文章简介" prop="summary">
                            <el-input v-model="article.summary" placeholder="请输入文章简介"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 封面图片 -->
                <el-form-item label="封面图片" prop="coverImg ">
                    <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="article.coverImg " :src="article.coverImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                        <div class="el-upload__tip" v-if="!article.coverImg">只能上传jpg/png/gif文件，且不超过1.5M</div>

                </el-form-item>

                <!-- 是否显示 -->
                <el-form-item label="是否显示" prop="isShow">
                    <el-switch v-model="article.isShow"></el-switch>
                </el-form-item>

                <!-- 富文本还是Markdown编辑 -->
                <el-form-item label="编辑器">
                    <el-radio-group v-model="article.editorType" @change="editorChange">
                        <el-radio :label="0">富文本</el-radio>
                        <el-radio :label="1">Markdown编辑器</el-radio>
                    </el-radio-group>
                    <!-- 温馨提示 -->
                    <svg-icon icon-class="warning" class-name='custom-class' style="margin-left:40px;" />
                    <span style="color:#d81e06;">切换编辑器方式会清空上一个编辑器内容！！！</span>

                </el-form-item>

                <!-- 
                   v-if用于小组件的显示和隐藏它是移出该组件下次重新渲染了
                   大组件还是使用v-show好，直接是display的none属性
                -->
                <!-- 富文本信息 使用插件信息-->
                <TinymceEditor v-show="article.editorType===0" ref="tin" v-model="tinContent" :headers="headers" upload-url="/lejuAdmin/material/uploadFileOss"></TinymceEditor>

                <!-- Markdown编辑器 -->
                <MarkdownEditor v-show="article.editorType===1" ref="md" class="markdown-editor" v-model="mdContent" />
                <!-- <el-button type="primary" @click="getC">获取内容</el-button> -->

                <!-- 提交表单 -->
                <el-form-item class="submitForm">
                    <el-button type="primary" @click="submitForm()">提交表单</el-button>
                    <el-button @click="resetForm('ruleForm')">重置表单</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

</div>
</template>

<script>
import {
    getToken
} from '@/utils/myAuth';

// 引入富文本插件 es6中默认的使用不用添加括号 名字随便起的也是
import TinymceEditor from '@/components/Tinymce'

import MarkdownEditor from '@/components/MarkdownEditor'
// 添加和编辑文章
import {
    addArticle,
    updateArticle,
    productArticle
} from '@/api/content/article'
export default {
    components: {
        TinymceEditor,
        MarkdownEditor
    },
    data() {
        return {
            article: {
                coverImg: '',
                // 是否显示
                isShow: true,

                // 富文本内容0是 Markdown是1
                editorType: 0

                // content1是原文内容 content2是转换后的html内容

            },
            id: '',
            // 富文本内容
            tinContent: '这是富文本内容',
            // Markdown内容
            mdContent: '这是Markdown文本内容',

            // 表单校验规则
            rules: {
                title: [{
                    required: true,
                    message: '请输入文章标题',
                    trigger: 'blur'
                }],
                author: [{
                    required: true,
                    message: '请输入文章作者',
                    trigger: 'blur'
                }]
            },
            loading: false,
            tips: '提交中……',

            fileList:[]

        };
    },
    computed: {
        headers() {
            return {
                token: getToken()
            }
        }
    },
    created() {
        this.id = this.$route.params.id
        // 编辑文章内容
        if (this.id) {
            // 内容渲染到列表中
            productArticle(this.id).then(res => {
                console.log(res)

                // 判断编辑器是
                if (res.data.productArticle.editorType === 0) {
                    this.tinContent = res.data.productArticle.content1

                } else {
                    this.mdContent = res.data.productArticle.content1
                }
                res.data.productArticle.isShow == 1 ? true : false
                // if(res.data.productArticle.isShow===1){
                //     res.data.productArticle.isShow=true
                // }else{
                //     res.data.productArticle.isShow=false
                // }

                this.article = res.data.productArticle
            })

        }
    },
    mounted() {

    },
    methods: {

      

        handleAvatarSuccess(res, file) {
            console.log(res);
            // 图片提交成功了
            if (res.success) {
                this.article.coverImg = res.data.fileUrl
            }
            // this.article.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1.5;

            // 正则判断图片的类型格式  ig表示忽略大小
            var reg = /image\/(jpeg|png|gif)/ig

            const isFileTypeOk = reg.test(file.type)

            if (!isFileTypeOk) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isFileTypeOk && isLt2M;
        },
        // 提交表单
        submitForm() {
            // 验证表单内容
            this.$refs.article.validate((valid) => {
                if (valid) {

                    // 富文本或者Markdown编辑器内容
                    if (this.article.editorType === 0) {
                        this.article.content1 = this.tinContent
                        this.article.content2 = this.tinContent
                    } else {
                        this.article.content1 = this.mdContent
                        this.article.content2 = this.$refs.md.getHtml()
                    }
                    // 是否显示
                    if (this.article.isShow) {
                        this.article.isShow = 1
                    } else {
                        this.article.isShow = 0
                    }

                    console.log(this.article)

                    // 编辑文章
                    if (this.id) {
                        updateArticle(this.article).then(res => {
                            console.log(res)
                            if (res.success) {
                                // this.$message.success('文章编辑成功')
                                this.loading = true

                                setTimeout(() => {
                                    this.$router.push({
                                        name: 'contentArticle'
                                    })
                                }, 2000);

                            } else {
                                this.$message.error('编辑失败！')
                            }

                        })
                    } else {

                        // 增加文章
                        addArticle(this.article).then(res => {
                            console.log(res)
                            if (res.success) {
                                this.$message.success('文章提交成功')

                                setTimeout(() => {
                                    this.$router.push({
                                        name: 'contentArticle'
                                    })
                                }, 1500);

                            } else {
                                this.$message.error('保存失败！')
                            }
                        })
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        resetForm(article) {
            this.$refs.article.resetFields();
        },
        // 文本编辑器选择
        editorChange(val) {
            console.log(val);
            this.article.editorType = val
            // 清空编辑器内容
            this.tinContent = ''
            this.mdContent = ''
        },
        getC() {
            console.log(this.$refs.md.getHtml(), this.$refs.md.getValue())

        }

    }

};
</script>

<style lang="scss" scoped>
.detail-main {
    .addCard {
        margin: 30px;

        .clearfix {
            span {
                font-weight: bolder;
                color: rgb(209, 50, 50);
                font-size: 22px;
            }
        }

        .avatar-uploader {
            width: 178px;
            height: 178px;
            border: 1px solid #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }

            .avatar {
                width: 178px;
                height: 178px;
                display: block;
                border-radius: 10px;
            }
            

        }

        // 富文本图片大小
        .wscnph {
            width: 400px;
            height: 300px;
        }

        .submitForm {
            margin-top: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        // Markdown编辑器
        .markdown-editor {

            // 深度选择器
            ::v-deep .tui-editor .te-md-splitter {
                width: 100%;
            }
        }

    }

}
</style>
